<template>

  <div>
    <el-drawer
      title="用户详情信息"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <div style="margin-left:20px">
        <div style="margin-top:20px">用户名：{{ userInfo.userName }}</div>
        <div style="margin-top:20px">姓名：{{ userInfo.nickName }}</div>
        <div style="margin-top:20px">身份证：{{ userInfo.idCard }}</div>
        <div style="margin-top:20px">性别：{{ userInfo.sex }}</div>
        <div style="margin-top:20px">出生日期：{{ userInfo.dateOfBirth }}</div>
        <div style="margin-top:20px">手机号：{{ userInfo.telephone }}</div>
        <!-- <div style="margin-top:20px">班级：{{ userInfo.classRoomId }}</div>//这里也不想做啦！！ -->
        <!-- <div style="margin-top:20px">房间：{{ userInfo.roomId }}</div>//这里不想做啦！！！ -->
        <div style="margin-top:20px">学制：{{ userInfo.academicYear }}</div>
        <!-- <div style="margin-top:20px">学历： {{ cultural(userInfo.culturalLevelId) }} </div> -->
        <div style="margin-top:20px">学历： {{ userInfo.culturalLevelId }} </div>
        <div style="margin-top:20px">入学时间：{{ userInfo.admissionYear }}</div>
        <div style="margin-top:20px">邮箱：{{ userInfo.email }}</div>
        <!-- <div style="margin-top:20px">民族： {{ nationality(userInfo.nationalityId) }} </div> -->
        <div style="margin-top:20px">民族： {{ userInfo.nationalityId }} </div>
        <!-- <div style="margin-top:20px">政治面貌： {{ politicalStatus(userInfo.politicalStatusId) }}</div> -->
        <div style="margin-top:20px">政治面貌： {{ userInfo.politicalStatusId }}</div>
        <!-- <div style="margin-top:20px">生源地：{{ area(userInfo.area) }}</div> -->
        <div style="margin-top:20px">生源地：{{ userInfo.area }}</div>
        <div style="margin-top:20px">家庭地址：{{ userInfo.homeAddress }}</div>
      </div>
    </el-drawer>
  </div>

</template>

<script>
import { getCodeList } from '@/api/code'

export default {
  name: 'UserDetail',
  props: {
    userInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      codeList: {},
      drawer: false
    }
  },
  computed: {
    cultural() {
      return function(value) {
        if (value && this.codeList) {
          const findCultural = this.codeList.culturalLevelList.find(item => item.id === value)
          return findCultural ? findCultural.value : ''
        }
        return ''
      }
    },
    nationality() {
      return function(value) {
        if (value && this.codeList) {
          const findNationalityId = this.codeList.nationalityList.find(item => item.id === value)
          return findNationalityId ? findNationalityId.value : ''
        }
        return ''
      }
    },
    politicalStatus() {
      return function(value) {
        if (value && this.codeList) {
          const findPoliticalStatus = this.codeList.politicalStatusList.find(item => item.id === value)
          return findPoliticalStatus ? findPoliticalStatus.value : ''
        }
        return ''
      }
    },
    area() {
      return function(value) {
        const birthplaceId = value
        var birthplaceName = ''
        if (value && this.codeList) {
          if (birthplaceId) {
            const birthplaceIdList = birthplaceId.split(',')
            const findProvince = this.codeList.areaList.find(item => item.code.toString() === birthplaceIdList[0])
            if (findProvince) {
              birthplaceName = birthplaceName + findProvince.value
              if (findProvince.children) {
                const findMuniciPal = findProvince.children.find(item => item.code.toString() === birthplaceIdList[1])
                if (findMuniciPal) {
                  birthplaceName = birthplaceName + `-${findMuniciPal.value}`
                  if (findMuniciPal.children) {
                    const findCounty = findMuniciPal.children.find(item => item.code.toString() === birthplaceIdList[2])
                    if (findCounty) {
                      birthplaceName = birthplaceName + `-${findCounty.value}`
                    }
                  }
                }
              }
            }
            return birthplaceName
          }
        }
      }
    }
  },

  methods: {
    showDrawer() {
      getCodeList().then((res) => {
        console.log('res', res)
        this.codeList = res
        console.log(111, '是否走到这里来')
        this.drawer = true
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
